<template>
  <el-upload
    class="upload-demo"
    ref="upload"
    action=""
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :limit="1"
    accept=".doc"
    :auto-upload="false"
    :http-request="handleUploadFile"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload()">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">只能上传doc文件，且不超过500kb</div>
    <el-progress ref="progress" :stroke-width="6" :percentage="percentage"></el-progress>
  </el-upload>
</template>
<!--action="http://api.kernelylz.cn:8008/api/v1/note/import/word"-->
<script>
    export default {
        name:"uploadDoc",
        props:['message'],
        data() {
            return {
             fileList:[],
                percentage:0,
            };
        },
        methods: {
            handleUploadFile(fileObj){
                var _this=this;
                console.log(fileObj.file);
                let fd = new FormData();
                fd.append('word', fileObj.file);//这里上传的是一个图片文件，以base64传递
                _this.$axios.post('/note/import/word',fd,{
                    headers:{
                        'Content-Type':'multipart/form-data'   //hearder 很重要，Content-Type 要写对
                    },
                    onUploadProgress: progressEvent => {
                        let percent=(progressEvent.loaded / progressEvent.total * 100) | 0
                        //调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
                        _this.percentage=percent

                    }
                }).then(function (res) {
                    console.log(res);
                    if(res.data.code==200){
                        _this.$parent.$parent.$refs.list.getnotelist()
                        _this.$refs.upload.onSuccess();
                    }
                }).catch(function (err) {
                    console.log(err);
                })
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
                this.percentage=0;
            },
            handlePreview(file) {
                console.log(file);
            }
        },
        watch:{
            message(val){
                if(val==false){
                    this.fileList=[];
                    this.percentage=0;
                }
            }
        }
    }
</script>
